<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix"></div>
      <div class="item">
        <el-form
          ref="form"
          :model="form"
          :rules="formRules"
          label-width="120px"
        >
          <el-form-item label="状态" prop="disable">
            <el-radio-group v-model="form.disable">
              <el-radio :label="0">开启</el-radio>
              <el-radio :label="1">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开启时间" prop="start_end_time">
            <el-date-picker
              clearable
              v-model="form.start_end_time"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="时间段" prop="firstTime">
            <el-time-picker
              clearable
              is-range
              v-model="form.firstTime"
              value-format="HH:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="第二轮时间段" prop="secondTime">
            <el-time-picker
              clearable
              is-range
              v-model="form.secondTime"
              value-format="HH:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="人数" prop="user_count_limit">
            <el-input v-model="form.user_count_limit"></el-input>
          </el-form-item>
          <el-form-item label="糖果数量" prop="reward_count">
            <el-input v-model="form.reward_count"></el-input>
          </el-form-item>
          <el-form-item label="保证金" prop="base_money">
            <el-input v-model="form.base_money" prop="base_money"></el-input>
          </el-form-item>
          <el-form-item label="用户等级限制" prop="limit_user_level">
            <el-input v-model="form.limit_user_level"></el-input>
          </el-form-item>
          <el-form-item label="接龙规则" prop="rule_type">
            <el-radio-group v-model="form.rule_type">
              <el-radio :label="1">最小接龙</el-radio>
              <el-radio :label="2">最大接龙</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="糖果礼物" prop="gift_id">
            <el-select
              filterable
              v-model="form.gift_id"
              placeholder="请选择礼物"
            >
              <el-option
                v-for="(item, index) in giftOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  listData,
  listTypeData,
  postEditData
} from "@/api/redEnvelope/globalConfig";

export default {
  data() {
    return {
      confirmBtn: false,

      giftOptions: [],
      formRules: {
        disable: [{ required: true, message: "请选择状态", trigger: "change" }],
        start_end_time: [
          { required: true, message: "请选择开启时间", trigger: "change" }
        ],
        firstTime: [
          { required: true, message: "请选择第一轮时间段", trigger: "change" }
        ],
        secondTime: [
          { required: true, message: "请选择第二轮时间段", trigger: "change" }
        ],
        user_count_limit: [
          { required: true, message: "请输入允许用户最大人数", trigger: "blur" }
        ],
        reward_count: [
          { required: true, message: "请输入奖品数量", trigger: "blur" }
        ],
        base_money: [
          { required: true, message: "请输入保证金", trigger: "blur" }
        ],
        limit_user_level: [
          { required: true, message: "请输入限制用户等级", trigger: "blur" }
        ],
        rule_type: [
          { required: true, message: "请选择接龙规则", trigger: "change" }
        ],
        gift_id: [{ required: true, message: "请选择礼物", trigger: "change" }]
      },
      form: {
        disable: 0,
        start_end_time: undefined,
        firstTime: undefined,
        secondTime: undefined,
        user_count_limit: undefined,
        reward_count: undefined,
        base_money: undefined,
        limit_user_level: undefined,
        rule_type: 1,
        gift_id: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listData().then(response => {
        this.form.disable = response.data.config.disable;
        this.form.base_money = response.data.config.base_money;
        this.form.gift_id = response.data.config.gift_id;
        this.form.limit_user_level = response.data.config.limit_user_level;
        this.form.reward_count = response.data.config.reward_count;
        this.form.rule_type = response.data.config.rule_type;
        this.form.user_count_limit = response.data.config.user_count_limit;
        this.form.start_end_time = [
          response.data.config.start_time,
          response.data.config.end_time
        ];
        this.form.firstTime = [
          this.formatSeconds(response.data.config.daily_start_time),
          this.formatSeconds(response.data.config.daily_end_time)
        ];
        this.form.secondTime = [
          this.formatSeconds(response.data.config.second_daily_start_time),
          this.formatSeconds(response.data.config.second_daily_end_time)
        ];

        response.data.gift_list.forEach(item => {
          // item.id)
          this.giftOptions.push({ value: item.id, label: item.name });
          this.confirmBtn = false;
        });
      });
    },
    onSubmit() {
      if (this.confirmBtn) return;
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmBtn = true;
          let obj = {};
          obj.rule_type = this.form.rule_type;
          obj.disable = this.form.disable;
          obj.base_money = parseInt(this.form.base_money);
          obj.gift_id = this.form.gift_id;
          obj.limit_user_level = this.form.limit_user_level;
          obj.user_count_limit = this.form.user_count_limit;
          obj.reward_count = this.form.reward_count;
          obj.start_time = this.form.start_end_time[0];
          obj.end_time = this.form.start_end_time[1];
          obj.daily_start_time = this.formatTime(this.form.firstTime[0]);
          obj.daily_end_time = this.formatTime(this.form.firstTime[1]);
          obj.second_daily_start_time = this.formatTime(
            this.form.secondTime[0]
          );
          obj.second_daily_end_time = this.formatTime(this.form.secondTime[1]);

          postEditData(obj).then(response => {
            if (response.code === 200) {
              this.getList();
              this.deleteDialogVisible = false;
              this.$notify({
                type: "success",
                message: "操作成功",
                position: "bottom-right",
                showClose: false,
                duration: 3000
              });
            } else {
              this.$message({
                message: response.message,
                type: "error"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    formatSeconds(result) {
      let h =
        Math.floor(result / 3600) < 10
          ? "0" + Math.floor(result / 3600)
          : Math.floor(result / 3600);
      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);
      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);
      return (result = h + ":" + m + ":" + s);
    },
    formatTime(time) {
      let hour = time.split(":")[0];
      let min = time.split(":")[1];
      let sec = time.split(":")[2];

      return (time = Number(hour * 3600) + Number(min * 60) + Number(sec));
    }
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}

/deep/.el-date-editor {
  width: 400px;
}

/deep/ .el-input__inner {
  width: 400px;
}
</style>
